<!-- 添加评论 -->
<template>
	<view class="commont-from-wrap">
		<!-- 评价商品 -->
		<view class="goods-card">
			<shopro-mini-card :title="orderDetail.goods.title" :image=" 'https://oss.bigchun.com' +orderDetail.goods.image">
				<template #describe>
					<view class="order-sku u-ellipsis-1">
						<text class="order-num">数量:{{ orderDetail.goods_num || 0 }};</text>

					</view>
				</template>
				<template #cardBottom>
					<view class="order-price-box u-flex ">
						<text class="order-price font-OPPOSANS">￥{{ orderDetail.goods.vip_price || 0 }}</text>
						<button class="u-reset-button status-btn" v-if="orderDetail.status_name">{{ orderDetail.status_name }}</button>
					</view>
				</template>
			</shopro-mini-card>
		</view>

		<view class="form-item">
			<view class="star-box u-flex">
				<view class="star-title u-m-r-40">{{ starTip }}</view>
				<u-rate v-model="star" minCount="1"></u-rate>
			</view>
			<view class="area-box">
				<textarea class="inp-area" v-model="message" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~~" placeholder-class="pl-style" />
				<view class="img-box">
					<u-upload
						:show-tips="false"
						:auto-upload="false"
            ref="uUpload"
            @on-choose-complete="onChoose"
						@on-uploaded="uploadSuccess"
						@on-remove="uploadRemove"
						:action="action"
						width="138"
						height="138"
						:max-count="9"
					></u-upload>
				</view>
			</view>
		</view>
		<view class="foot_box u-flex u-row-center u-col-center u-m-t-60" v-if="!isComment"><button class="u-reset-button post-btn" @tap="subComment">发布</button></view>
	</view>
</template>

<script>
import {
  API_URL
} from '@/env';
import https from '@/shopro/requests/index'
export default {
	components: {},
	data() {
		return {
      action:API_URL+'index/upload',
			imgList: [],
			star: 5,
			message: '',
			orderDetail: {},
			isComment:false
		};
	},
	computed: {
		starTip() {
			let text = '';
			if (this.star <= 1) {
				text = '差评';
			}
			if (this.star > 1 && this.star <= 3) {
				text = '中评';
			}
			if (this.star >= 4) {
				text = '好评';
			}
			return text;
		}
	},
	onLoad() {
		this.getOrderDetail();
		console.log(this.$Route.query)
		if(this.$Route.query.isComment){
			this.isComment  = true
			this.getComment()
		}
	},
	methods: {
		// 订单详情
		getOrderDetail() {
			let that = this;
			https('common.cate_detail', {
				order_id: that.$Route.query.orderId
			}).then(res => {
				if (res.code === 1) {
					that.orderDetail = res.data;
					that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
					that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
				}
			});
		},
		getComment(){
			let that = this;
			https('common.cate_goods_comment', {
				order_id: that.$Route.query.orderId
			}).then(res => {
				if (res.code === 1) {
					that.star= res.data.comment.score
					that.message= res.data.comment.comment
					that.imgList= res.data.images
				}
			});
		},
    onChoose() {
      uni.showLoading({
        title: '上传图片中'
      });
      this.$refs.uUpload.upload();

    },
		// 上传图片成功
		uploadSuccess(e) {
			// this.imgList = [];
			e.forEach(item => {
				this.imgList.push(item.url);
			});
		},

		// 移除图片
		uploadRemove(index) {
			this.imgList.splice(index, 1);
		},

		subComment() {
			this.imgList = this.$refs.uUpload.lists.map((item)=> {
			 return item.url
			})

			let that = this;
			https('common.cate_comment', {
				order_id: that.$Route.query.orderId,
				goods_id: that.orderDetail.goods_id,
				score: that.star,
				comment: that.message,
				images: that.imgList
			}, '提交中...').then(res => {
				if (res.code === 1) {
					that.$u.toast('评论发表成功');
					that.$Router.back();
				}
			});
		}
	}
};
</script>

<style lang="scss">
// 评价商品
.goods-card {
	margin: 10rpx 0;
	padding: 20rpx;
	background: #fff;
	.order-sku {
		font-size: 24rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		width: 450rpx;
		margin-bottom: 20rpx;
		.order-num {
			margin-right: 10rpx;
		}
	}
	.order-price-box {
		.status-btn {
			height: 32rpx;
			border: 1rpx solid rgba(207, 169, 114, 1);
			border-radius: 15rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(168, 112, 13, 1);
			padding: 0 10rpx;
			margin-left: 20rpx;
			background: rgba(233, 183, 102, 0.16);
		}
		.order-price {
			font-size: 26rpx;

			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}
	}
}

// 评论，选择图片
.form-item {
	background: #ffff;
	padding-bottom: 30rpx;
	.star-box {
		height: 100rpx;
		padding: 0 25rpx;
	}
	.star-title {
		font-weight: 600;
	}
}
.area-box {
	width: 690rpx;
	min-height: 306rpx;
	background: rgba(249, 250, 251, 1);
	border-radius: 20rpx;
	padding: 28rpx;
	margin: auto;
	.pl-style {
		font-size: 26rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 42rpx;
	}
	.inp-area {
		font-size: 26rpx;

		font-weight: 500;
		color: #333;
		line-height: 50rpx;
		width: 100%;
	}
	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
}
.post-btn {
	width: 690rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
	border-radius: 40rpx;
	color: rgba(#fff, 0.9);
	margin-bottom: 30rpx;
}
</style>
